﻿@using TheoryOn.Mvc.Models;
@{
    ViewBag.Title = "Demo Page";

    var article1 = new Article()
    {
        Color = "green",
        Constructs = new Construct[]{
            new Construct()
            {
                ID = 1,
                Title = "Label1",
                ConsequenceID = 2
            },
            new Construct()
            {
                ID = 2,
                Title = "Label2",
                ConsequenceID = 3
            },
            new Construct()
            {
                ID = 3,
                Title = "Label3",
                ConsequenceID = 4
            },
            new Construct()
            {
                ID = 4,
                Title = "Label4",
                ConsequenceID = 2
            }
        }.ToList()
    };
    var article2 = new Article()
    {
        Color = "blue",
        Constructs = new Construct[]{
            new Construct()
            {
                ID = 11,
                Title = "Label11",
                ConsequenceID = 12
            },
            new Construct()
            {
                ID = 12,
                Title = "Label12",
                ConsequenceID = 14
            },
            new Construct()
            {
                ID = 13,
                Title = "Label13",
                ConsequenceID = 14
            },
            new Construct()
            {
                ID = 14,
                Title = "Label14",
                ConsequenceID = 11
            }
        }.ToList()
    };

    
    var articles = new Article[] { article1, article2 };
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
            <p>
                <a href="@Url.Action("AntecedentsConsequences")">Antecedents & Consequences</a>
                <a href="@Url.Action("Network")">Network</a>
            </p>
        </div>
    </section>
}


  <style type="text/css">
    #mynetwork {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>

<p>
  There are a lot of options with arrows! They can also be combined with dashed lines.
</p>

<div id="mynetwork"></div>

@section scripts{
<script type="text/javascript">
    $(function () {
        // create an array with nodes
        var nodes = new vis.DataSet(@Html.Raw(Json.Encode(Article.ToVisNodes(articles))));

        // create an array with edges
        var edges = new vis.DataSet(@Html.Raw(Json.Encode(Article.ToVisEdges(articles))));

        // create a network
        var container = document.getElementById('mynetwork');
        var data = {
            nodes: nodes,
            edges: edges
        };
        var options = {};
        var network = new vis.Network(container, data, options);
    });
</script>
}
